<template>
  <div>
    <el-row>
        <el-col>
            <flow-record :caseStatus="caseStatus"></flow-record>
        </el-col>
    </el-row>
    <!-- 上传文件步骤 -->
    <el-row class="module-box" v-if="caseStatus == 1">
        <el-col>
            <el-row class="file-box">
              <el-col :span="2">
                <div class="icon-box">
                  <fa-icon class="fa-file-text icon-size" />
                </div>
              </el-col>
              <el-col :span="18">
                <div>
                  <p class="text-bold">填写需导入的个人目标绩效数据</p>
                  <p class="text-no">请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除，单次导入的数据不超过3000条。</p>
                  <a href="javascript:#;" target="_blank" class="a-underline">下载模板</a>
                </div>
              </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row v-if="caseStatus == 1">
        <el-col class="upload-box">
          <el-upload
          class="upload-con"
          action="">
            <el-row class="file-box">
              <el-col :span="2">
                <div class="icon-box">
                  <fa-icon class="fa-upload icon-size" />
                </div>
              </el-col>
              <el-col :span="18">
                <div>
                  <p class="text-bold">上传填好的员工信息表</p>
                  <p class="text-no">文件后缀名必须为xls 或xlsx （即Excel格式），文件大小不得大于10M</p>
                  <a href="javascript:#;" target="_blank" class="a-underline">上传文件</a>
                </div>
              </el-col>
            </el-row>
          </el-upload>
        </el-col>
    </el-row>
    <!-- 导入步骤 -->
    <el-row class="module-box" v-if="caseStatus == 2">
        <el-col>
            <el-row class="file-box">
              <el-col :span="2">
                <div class="icon-box" style="color: #4BD863;">
                  <fa-icon class="fa-check icon-size" />
                </div>
              </el-col>
              <el-col :span="18">
                <div>
                  <p class="text-bold">正常数量条数</p>
                  <p class="a-underline">100条</p>
                </div>
              </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row v-if="caseStatus == 2">
        <el-col>
            <el-row class="file-box">
              <el-col :span="2">
                <div class="icon-box" style="color: #FF6A00;">
                  <fa-icon class="fa-times icon-size" />
                </div>
              </el-col>
              <el-col :span="18">
                <div>
                  <p class="text-bold">异常数量条数</p>
                  <p class="a-underline">100条</p>
                </div>
              </el-col>
            </el-row>
        </el-col>
    </el-row>
    <!-- 导入完成 -->
    <div class="upload-success" v-if="caseStatus == 3">
      <div style="color: #4BD863;font-size: 50px;">
        <fa-icon class="fa-check" />
      </div>
      <p style="font-size: 40px;font-weight: bold;margin: 10px;">批量导入完成</p>
      <p style="font-size: 14px;">成功导入业绩数据100条，失败100条</p>
    </div>
    <div class="button-box">
      <el-button type="primary" plain v-if="caseStatus != 3" @click="next">
        下一步
      </el-button>
      <el-button plain v-if="caseStatus == 2" @click="resetStatus">
        重新上传
      </el-button>
      <el-button type="primary" plain v-if="caseStatus == 3" @click="closeUpload">
        完成
      </el-button>
    </div>
    <div class="error-tips" v-if="caseStatus == 2">
      <p class="tips-title">异常提示：</p>
      <ul class="error-list">
        <li v-for="item in errorList" :key="item.id">第{{item.id}}行：{{item.error}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { CONSTANT_OBJ } from '@/utils/constant'
import { ERROR_LIST } from '../js/contant.js'
// import { common } from '@/utils/common'
// import api from '../api'
import FlowRecord from './FlowRecord'
export default {
  components: {FlowRecord},
  data () {
    return {
      caseStatus: 1,
      errorList: ERROR_LIST
    }
  },
  mounted () {},
  methods: {
    close () {
      this.$emit('closeEditor', false)
    },
    next () {
      if (this.caseStatus <= 3) {
        this.caseStatus++
        console.log(this.caseStatus)
      }
    },
    resetStatus () {
      this.caseStatus = 1
    },
    closeUpload () {
      this.$emit('closeUpload', false)
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/css/global.less";
.upload-box{
  width: 100%;
}
/deep/ .upload-box .upload-con .el-upload{
  width: 100%;
  text-align: left;
}
.icon-size{
  font-size: 40px;
  text-align: center;
}
.text-bold{
  font-size: 17px;
  font-weight: bold;
}
.text-no{
  font-size: 14px;
  margin: 15px 0;
}
.a-underline{
  text-decoration: none;
  color: #0079FE;
}
.file-box{
  border: 1px solid rgba(233, 233, 233, 1);
  box-sizing: border-box;
  padding: 15px 0;
  margin: 0 20px;
}
.icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.module-box{
  margin: 20px 0;
}
.button-box{
  margin: 150px 0 50px 0;
  width: 100%;
  text-align: center;
}
.upload-success{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.error-tips{
  background-color: @panel-color;
  border: 1px solid @main-border-color;
  box-sizing: border-box;
  padding: 15px 20px;
  max-height: 160px;
  overflow: auto;
}
.tips-title{
  font-weight: 700;
  font-size: 14px;
  color: rgb(255, 106, 0);
  margin-bottom: 15px;
}
.error-list{
  font-size: 14px;
  color: rgb(255, 106, 0);
  list-style: none;
  li {
    margin: 10px 0;
  }
}
</style>
